<!-- 经办人相关信息 -->
<template>
  <div class="card">
    <div class="card-header">
      <div class="common-sub-title">经办人相关信息</div>
      <el-button plain @click="handleSave">保存</el-button>
    </div>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      hide-required-asterisk>
      <el-row>
        <el-form-item label="企业所在行政区" prop="area">
          <el-input v-model.trim="ruleForm.area" placeholder="请输入项目合同价，单位元" />
        </el-form-item>
        <el-form-item label="项目合同价（元）" prop="amount">
          <el-input v-model.trim="ruleForm.amount" placeholder="请输入项目合同价，单位元" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="经办人姓名" prop="name">
          <el-input v-model.trim="ruleForm.name" placeholder="请输入您的姓名" />
        </el-form-item>
        <el-form-item label="经办人身份证号码" prop="identityCardNumber">
          <el-input v-model.trim="ruleForm.identityCardNumber" placeholder="请输入您的身份证号码" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="经办人手机号" prop="phone">
          <el-input v-model.trim="ruleForm.phone" placeholder="请输入您的手机号码" />
        </el-form-item>
        <el-form-item label="经办人经常居住地址" prop="address">
          <el-input v-model.trim="ruleForm.address" placeholder="请输入您的经常居住地址" />
        </el-form-item>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
const ruleForm = reactive({
  // 企业所在行政区
  area: '',
  // 项目合同价
  amount: '',
  // 经办人姓名
  name: '',
  // 经办人身份证号码
  identityCardNumber: '',
  // 经办人手机号
  phone: '',
  // 经办人经常居住地址
  address: ''
})

const rules = reactive({
  area: [{ required: true, message: '请选择企业所在行政区' }],
  amount: [{ required: true, message: '请输入项目合同价' }],
  name: [{ required: true, message: '请输入您的姓名' }],
  identityCardNumber: [{ required: true, message: '请输入您的身份证号码' }],
  phone: [{ required: true, message: '请输入您的手机号码' }],
  address: [{ required: true, message: '请输入您的经常居住地址' }],
})


// 表单校验
const ruleFormRef = ref(null)
function validateForm() {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate(valid => {
      if (valid) {
        resolve(ruleForm)
      }
    })
  })
}

// 保存
function handleSave(){
  validateForm()
  .then(res=>{
    console.log(222,res)
  })
}

defineExpose({
  validateForm
})
</script>

<style lang="scss" scoped>
</style>
